<template>
  <div class="Boutiquesonglistentrance">
    <div class="main">
      <div class="imges" @click="getBoutiquesonglist">
        <img :src="Thefirstboutique.coverImgUrl" alt="" style="width:100%;height:100%;filter: blur(30px);border-radius: 5px;">
      </div>
      <div style="display: flex;position: relative;top: -175px;left: 25px; cursor: pointer;width: 1000px;" @click="getBoutiquesonglist">
        <img :src="Thefirstboutique.coverImgUrl" alt="" style="width:150px;height:150px;border-radius: 5px;">
        <div style="margin-left:20px;margin-top:20px;">
          <div style="width: 90px;height: 30px;border: 1px solid  rgb(188, 201, 47);border-radius: 25px;justify-content: center;align-items: center;display: flex;">
            <i class="iconfont icon-huangguan" style="color: rgb(188, 201, 47);"></i><span style="font-size:13px;color: rgb(188, 201, 47);">精品歌单</span>
          </div>
          <p style="color:#fff;margin-top:20px;">{{Thefirstboutique.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus'
export default {
  name: 'Boutiquesonglistentrance',
  data() {
    return {
      //存储第一个精品歌单
      Thefirstboutique: {},
      quanbu: '全部',
      BoutiquesongListlength: ''
    }
  },
  computed: {
    ...mapState({
      BoutiquesongList: state => state.playlist.BoutiquesongList
    })
  },
  mounted() {
    this.$store.dispatch('getBoutiquesongList', { cat: this.quanbu })
  },
  methods: {
    getBoutiquesonglist() {
      this.$router.push({ path: 'BoutiquesongList', query: { id: this.quanbu } })
    }
  },
  created() {
    Bus.$on('Entertheboutique', val => {
      this.quanbu = val
    })
  },
  watch: {
    BoutiquesongList: {
      handler(newName, oldName) {
        this.Thefirstboutique = newName[0]
        this.BoutiquesongListlength = newName.length
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Boutiquesonglistentrance {
  margin-top: 70px;
  .main {
    margin-top: 20px;

    .imges {
      overflow: hidden;
      width: 1100px;
      height: 200px;
      cursor: pointer;
    }
  }
}
</style>